import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:xim/widget/search/simple_search_widget.dart';



var focusNode = FocusNode();
var controller = TextEditingController();

/// 选择定位点页面
class SelectLocationPage extends StatefulWidget {
  const SelectLocationPage({Key? key}) : super(key: key);

  @override
  State<SelectLocationPage> createState() => _SelectLocationPageState();
}

class _SelectLocationPageState extends State<SelectLocationPage> {
  late BMFMapOptions mapOptions = BMFMapOptions(
      center: BMFCoordinate(39.917215, 116.380341),
      zoomLevel: 12,
      showZoomControl: false,
      mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 地图
          SizedBox(
              width: 1.sw,
              height: 1.sh,
              child: Column(
                children: [Expanded(
                  child: BMFMapWidget(
                    onBMFMapCreated: (controller) {
                      //
                    },
                    mapOptions: mapOptions,
                  ),
                ),
                // 上拉面板
                  SlidingUpPanel(
                    panel: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: [
                          searchInputBox(context),
                          Expanded(
                              child: ListView(
                                children: List.generate(20, (index) => const Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text("龙阳花苑",),
                                        SizedBox(height: 2,),
                                        Text("1.5km | 浦东新区东三里桥245弄", style: TextStyle(fontSize: 12, color: Colors.grey)),
                                        SizedBox(height: 6,),
                                      ],
                                    ),
                                    Icon(Icons.check)
                                  ],
                                )),
                              )
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              )
          ),
          // 控件
          Positioned(top: 0, left: 0, height: 120, child: Container(
            width: 1.sw,
            decoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.grey, Colors.transparent],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0, 0.8]
              )
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 26.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text("取消", style: TextStyle(color: Colors.white, fontSize: 14, fontWeight: FontWeight.w400, decoration:
                  TextDecoration.none),),
                  Container(
                    decoration: const BoxDecoration(
                      color: Colors.lightBlueAccent,
                      borderRadius: BorderRadius.all(Radius.circular(6)),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
                    child: const Text("确定", style: TextStyle(fontSize: 14,fontWeight: FontWeight.w400, decoration: TextDecoration.none, color: Colors.white),),
                  )
                ],
              ),
            ),
          )),
        ],
      ),
    );
  }
}

/// 输入框控件
Widget searchInputBox(BuildContext context){
  var outlineInputBorder = OutlineInputBorder(
      borderRadius: BorderRadius.circular(6),
      borderSide: const BorderSide(style: BorderStyle.none)
  );
  return Row(
    children: [
      Expanded(child: TextField(
        controller: controller,
        style: const TextStyle(fontSize: 14),
        maxLines: 1,
        focusNode: focusNode,
        decoration: InputDecoration(
          isCollapsed: true,
          fillColor: const Color(0xffF6F6F8),
          contentPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
          filled: true,
          enabledBorder: outlineInputBorder,
          focusedBorder: outlineInputBorder,
          focusedErrorBorder:outlineInputBorder,
          errorBorder: outlineInputBorder,
          hintText: "搜索地点",
          // prefixIcon:const Icon(Icons.search, color: Color(0xffc8d6e5), size: 14,),
          suffix: InkWell(child: const Icon(Icons.close, color: Color(0xffc8d6e5), size: 14,), onTap: (){
            controller.clear();
            FocusScope.of(context).requestFocus(FocusNode());
          },),
        ),
      )),
    ],
  );
}